.loadingBox {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: #c4e9eb;
  align-items: center;
  justify-content: center;
  .waveBox {
    position: relative;
    .waveImg {
      width: 190px;
      height: 60px;
    }
    .wave {
      stroke: #0f767b;
      animation: waveAni 3.4s linear infinite;
      stroke-dasharray: 0 16 85 16;
    }
  }

  .boatBox {
    position: relative;
    top: 30px;
    .boat {
      fill: #676662;
      width: 160px;
      height: 60px;
      animation: boatAni 4s ease-in-out infinite;
      transform-origin: 90% 80%;
    }
  }
}
.hide {
  display: none;
}
@keyframes waveAni {
  0% {
    stroke-dashoffset: -133;
    transform: translate3d(-118px, 0, 0);
  }
  100% {
    stroke-dashoffset: -33;
    transform: translate3d(-28px, 0, 0);
  }
}
@keyframes boatAni {
  0% {
    transform: translate(6px, 10px) rotate(5deg);
  }
  50% {
    transform: translate(0px, -2px) rotate(-5deg);
  }
  100% {
    transform: translate(6px, 10px) rotate(5deg);
  }
}
